<script setup lang="ts">
import { h, ref } from "vue"
import { useMessage, NButton, NDataTable, NImage } from "naive-ui"
import { getSwiperList, updateSwiper, deleteSwiper } from "@api/index"
import pagination from "@/components/pagination.vue"
import addImage from "./components/addImage.vue"
import { getStorage } from "@/util/cache"
const orgId = getStorage("orgId")

const showModal = ref(false)
const message = useMessage()
const editConfig = ref({
  isEdit: false,
  echoData: {},
})
const pageConfig = ref({
  page: 1,
  pageSize: 10,
})
const pageTotal = ref(0)

const swiperList: any = ref([])
const handleGetSwiperList = (data: any) => {
  getSwiperList({ ...data, orgId }).then((res: any) => {
    pageTotal.value = res.data?.totalCount
    swiperList.value = res.data.list
  })
}
handleGetSwiperList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })

const columns = [
  {
    title: "ID",
    key: "id",
  },
  {
    title: "图片",
    key: "imgurl",
    render(row: any) {
      return [
        h(
          NImage,
          {
            size: "small",
            src: row?.imgurl,
            width: 60,
          },
          { default: () => "" }
        ),
      ]
    },
  },
  {
    title: "链接地址",
    key: "clickhref",
  },

  {
    title: "操作",
    key: "action",
    render(row: any) {
      return [
        h(
          NButton,
          {
            size: "small",
            onClick: () => {
              showModal.value = true
              editConfig.value.isEdit = true
              editConfig.value.echoData = row
            },
          },
          { default: () => "编辑" }
        ),
        h(
          NButton,
          {
            size: "small",
            onClick: () => {
              handleDeleteCate([row?.id])
            },
          },
          { default: () => "删除" }
        ),
      ]
    },
  },
]

const handleOpenModal = () => {
  showModal.value = true
}

//弹窗确认
const modalSubmit = (data: any) => {
  updateSwiper({ ...data, orgId }).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetSwiperList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
  })
  showModal.value = false
  editConfig.value.isEdit = false
  editConfig.value.echoData = {}
}
//弹窗关闭
const modalClose = () => {
  showModal.value = false
  editConfig.value.isEdit = false
  editConfig.value.echoData = {}
}
//删除分类
const handleDeleteCate = (data: any) => {
  deleteSwiper(data).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetSwiperList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
  })
}

//分页
const handleChangePage = () => {
  handleGetSwiperList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })
}
</script>

<template>
  <div class="index">
    <div class="table">
      <div class="table_action">
        <n-button attr-type="button" @click="handleOpenModal"> 新增轮播项 </n-button>
      </div>
      <n-data-table :columns="columns" :data="swiperList" :pagination="false" :bordered="false" />
      <pagination :pageTotal="pageTotal" :pageConfig="pageConfig" :handleChangePage="handleChangePage" />
    </div>
    <addImage :showModal="showModal" :modalSubmit="modalSubmit" :modalClose="modalClose" :editConfig="editConfig" />
  </div>
</template>

<style lang="scss" scoped>
.index {
  overflow-y: scroll; //竖向滚动
  overflow-x: scroll; //横向滚动

  .search {
    height: 100px;
    padding: 20px;
    background-color: var(--BlockBgColor);
    transition: background-color 0.3s var(--n-bezier);
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .form_select {
      width: 150px;
    }
  }

  .table {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--BlockBgColor);
    transition: background-color 0.3s var(--n-bezier);

    .table_action {
      height: 60px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
